<!-- 人事-异动设置-新增异动原因弹出框 -->
<template>
  <a-modal
    width="40%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
    title-align="center"
    unmount-on-close
  >
    <template #title> 新增异动原因 </template>
    <div>
      <a-form :model="formData" ref="refForm" :rules="rules" auto-label-width>
        <a-form-item label="异动类型：" field="changeType">
          <div>
            {{ list.find((item: any) => item.id === formData.changeType).name }}
          </div>
        </a-form-item>
        <a-form-item label="是否启用：" field="enable">
          <a-switch
            v-model="formData.enable"
            :checked-value="1"
            :unchecked-value="2"
          ></a-switch>
        </a-form-item>
        <a-form-item label="异动原因：" field="reason">
          <a-textarea
            v-model="formData.reason"
            show-word-limit
            :max-length="300"
            :auto-size="{
              minRows: 5
            }"
            allow-clear
            placeholder="请输入"
            :disabled="!formData.changeType"
          ></a-textarea>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { validateRules } from '@/utils/common';
import { cloneDeep } from 'lodash';
import { CheckHumanChangeSetting } from '@/apis/management/human/baseSetting/humanSetting';
const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    list: any; // 传进来的类型
    data: any; // 传进来的数据
    currTypeId: number; // 传进来的类型id
  }>(),
  {
    visible: false
  }
);

const emits = defineEmits(['update:visible', 'changeAddEmit']);

// 校验名字查重
const validateCause = async (val: string, cb: any) => {
  try {
    if (val === props.data?.reason && formData.value.id) {
      //
    } else {
      const data = {
        reason: val,
        funcType: 1,
        changeType: formData.value.changeType
      };
      const res = await validateRules(CheckHumanChangeSetting, data);
      if (res.code) {
        cb(`${res.msg}`);
      }
    }
  } catch (error: unknown) {
    console.log(error);
  }
};

const rules = {
  changeType: [
    {
      required: true,
      message: '请选择'
    }
  ],
  enable: [
    {
      required: true,
      message: '请选择'
    }
  ],
  reason: [
    {
      required: true,
      message: '请输入'
    },
    {
      validator: validateCause
    }
  ]
};

let formData = ref({
  funcType: undefined, // 异动类型
  changeType: undefined, // 异动类型
  enable: 1, // 是否启用
  reason: '' // 异动原因
});

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal && props.data?.id) {
      formData.value = cloneDeep(props.data);
    } else {
      formData.value = {
        funcType: undefined, // 异动类型
        changeType: props.currTypeId, // 异动类型
        enable: 1, // 是否启用
        reason: '' // 异动原因
      };
    }
  }
);
let refForm = ref();

const handleOk = async () => {
  if (await refForm.value.validate()) {
    return;
  }
  emits('changeAddEmit', formData.value);
  emits('update:visible', false);
};

const handleCancel = () => {
  emits('changeAddEmit', null);
  emits('update:visible', false);
};
</script>

<style scoped lang="less">
.icon {
  cursor: pointer;
  font-size: 20px;
}
</style>
